import {observer} from 'mobx-react-lite';
import {Path, SvgProps} from 'react-native-svg';
import {useGlobalStore} from '../../mobx';
import {getColorStr} from '../../themes';
import {SvgCommon} from './Common';

export const SvgLock = observer((props: SvgProps) => {
  const {theme} = useGlobalStore();
  return (
    <SvgCommon {...props} isCommon>
      <Path
        d="M41 20.1406H36.5V13.6406C36.5 7.34062 31.3 2.14062 25 2.14062C18.7 2.14062 13.5 7.34062 13.5 13.6406V20.1406H9C7.1 20.1406 5.5 21.7406 5.5 23.6406V41.6406C5.5 43.6406 7.1 45.1406 9 45.1406H41C42.9 45.1406 44.5 43.5406 44.5 41.6406V23.6406C44.5 21.7406 42.9 20.1406 41 20.1406ZM16.5 13.6406C16.5 8.94063 20.3 5.14062 25 5.14062C29.7 5.14062 33.5 8.94063 33.5 13.6406V20.1406H16.5V13.6406ZM41.5 41.6406C41.5 41.9406 41.3 42.1406 41 42.1406H9C8.7 42.1406 8.5 41.9406 8.5 41.6406V23.6406C8.5 23.4406 8.7 23.1406 9 23.1406H41C41.3 23.1406 41.5 23.3406 41.5 23.6406V41.6406Z"
        fill={getColorStr(theme, 'color_1')}
      />
      <Path
        d="M25 37.1406C24.2 37.1406 23.5 36.4406 23.5 35.6406V29.6406C23.5 28.8406 24.2 28.1406 25 28.1406C25.8 28.1406 26.5 28.8406 26.5 29.6406V35.6406C26.5 36.5406 25.8 37.1406 25 37.1406Z"
        fill={getColorStr(theme, 'color_1')}
      />
    </SvgCommon>
  );
});

export const SvgLockFill = observer((props: SvgProps) => {
  const {theme} = useGlobalStore();
  return (
    <SvgCommon {...props}>
      <Path
        d="M20.25 10H18V6.75C18 3.6 15.4 1 12.25 1C9.1 1 6.5 3.6 6.5 6.75V10H4.25C3.3 10 2.5 10.8 2.5 11.75V20.75C2.5 21.75 3.3 22.5 4.25 22.5H20.25C21.2 22.5 22 21.7 22 20.75V11.75C22 10.8 21.2 10 20.25 10ZM8 6.75C8 4.4 9.9 2.5 12.25 2.5C14.6 2.5 16.5 4.4 16.5 6.75V10H8V6.75Z"
        fill={getColorStr(theme, 'color_1')}
      />
      <Path
        d="M12.25 18.5C11.85 18.5 11.5 18.15 11.5 17.75V14.75C11.5 14.35 11.85 14 12.25 14C12.65 14 13 14.35 13 14.75V17.75C13 18.2 12.65 18.5 12.25 18.5Z"
        fill={getColorStr(theme, 'color_2')}
      />
    </SvgCommon>
  );
});
